import { color } from 'echarts/lib/theme/dark'

const data = [{
  'excepted': '2',
  'actual': '2',
  'eventName': 'LEVEL_STARTED_LOT'
},
{
  'excepted': '2',
  'actual': '2',
  'eventName': 'RECIPE_EXEC_STARTED'
},
{
  'excepted': '0',
  'actual': '0',
  'eventName': 'PH_CONNECTING_ABORTED'
},
{
  'excepted': '0',
  'actual': '0',
  'eventName': 'PH_DISCONNECTING_ABORTED'
},
{
  'excepted': '0',
  'actual': '0',
  'eventName': 'PH_LOT_LOADING_ABORTED'
},
{
  'excepted': '0',
  'actual': '0',
  'eventName': 'PH_LOT_UNLOADING_ABORTED'
},
{
  'excepted': '0',
  'actual': '0',
  'eventName': 'PH_WAFER_LOADING_ABORTED'
},
{
  'excepted': '0',
  'actual': '0',
  'eventName': 'PH_WAFER_UNLOADING_ABORTED'
},
{
  'excepted': '0',
  'actual': '0',
  'eventName': 'PH_CASSETTE_LOADING_ABORTED'
},
{
  'excepted': '0',
  'actual': '0',
  'eventName': 'PH_CASSETTE_UNLOADING_ABORTED'
},
{
  'excepted': '2',
  'actual': '3',
  'eventName': 'PH_DEVICE_LOADING_ABORTED'
},
{
  'excepted': '0',
  'actual': '0',
  'eventName': 'PH_DEVICE_BINNING_ABORTED'
},
{
  'excepted': '0',
  'actual': '0',
  'eventName': 'PH_PAUSING_ABORTED'
},
{
  'excepted': '0',
  'actual': '0',
  'eventName': 'PH_RESUMING_ABORTED'
},
{
  'excepted': '0',
  'actual': '0',
  'eventName': 'PH_DRIVER_FUNCTION_EXECUTION_ABORTED'
},
{
  'excepted': '0',
  'actual': '0',
  'eventName': 'PH_DRIVER_ READING_STATUS_BYTE_ABORTED'
},
{
  'excepted': '0',
  'actual': '0',
  'eventName': 'PH_COMMAND_EXECUTION_ABORTED'
},
{
  'excepted': '0',
  'actual': '0',
  'eventName': 'DATALOG_FILE_PAUSED'
},
{
  'excepted': '0',
  'actual': '0',
  'eventName': 'TESTPROGRAM_ACTIVATION_ABORTED'
},
{
  'excepted': '0',
  'actual': '0',
  'eventName': 'TESTPROGRAM_LOADING_ABORTED'
},
{
  'excepted': '0',
  'actual': '0',
  'eventName': 'TESTPROGRAM_BINDING_ABORTED'
},
{
  'excepted': '0',
  'actual': '0',
  'eventName': 'TESTPROGRAM_STARTING_ABORTED'
},
{
  'excepted': '0',
  'actual': '0',
  'eventName': 'TESTPROGRAM_STOPPING_ABORTED'
},
{
  'excepted': '0',
  'actual': '0',
  'eventName': 'RECIPE_EXEC_ABORTED'
},
{
  'excepted': '0',
  'actual': '0',
  'eventName': 'RECIPE_HOLD_STARTED'
},
{
  'excepted': '0',
  'actual': '0',
  'eventName': 'RECIPE_PAUSE_STARTED'
}
]
const excepteds = data.map((item) => item.excepted)
export const Event = {
  title: {
    text: '重点Event统计',
    left: 'center',
    top: '10px',
    textStyle: {
      color: '#6C6C6C',
      fontSize: 20,
      fontWeight: 600,
      align: 'center'
    }
  },
  dataset: {
    // source: [
    //   ['amount', 'product'],
    //   [58212, 'Matcha LatteMatcha'],
    //   [78254, 'Milk Tea'],
    //   [41032, 'Cheese Cocoa'],
    //   [12755, 'Cheese Brownie'],
    //   [20145, 'Matcha Cocoa'],
    //   [79146, 'Tea'],
    //   [91852, 'Orange Juice'],
    //   [101852, 'Lemon Juice'],
    //   [20112, 'Walnut Brownie']
    // ],
    source: data,
    dimensions: ['excepted', 'actual', 'eventName']
  },
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(69, 14, 255,0.5)',
    //   axisPointer: {
    //     type: 'cross' // 十字准线指示器，可选为：'line' | 'shadow'
    //   },
    borderWidth: '0',
    textStyle: {
      color: '#6DFFFF'
    },
    lineStyle: {
      width: 2,
      type: 'dashed' // 设置虚线类型
    },
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
    // formatter: (params) => {
    //   return params[0].value.eventName
    // }
  },
  grid:
    {
      top: '10%',
      width: '93%',
      bottom: '3%',
      left: '5%',
      containLabel: true
    },
  xAxis: {
    type: 'category',
    triggerEvent: true,
    axisLabel: {
      overflow: 'truncate',
      interval: 0,
      rotate: 40,
      formatter: function(params) {
        if (params.length > 25) {
          return params.substring(0, 25) + '...'
        } else {
          return params
        }
      },
      lineStyle: {
        color: '#090909'
      }
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#090909'
      }
    }
  },
  yAxis: {
    // type: 'category'
    axisLabel: {
      formatter: '{value}',
      lineStyle: {
        color: '#090909'
      }
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#090909'
      }
    }
  },
  visualMap: {
    show: false,
    orient: 'horizontal',
    left: 'center',
    min: 10,
    max: 100,
    // text: ['High Score', 'Low Score'],
    // Map the score column to color
    dimension: 0,
    inRange: {
      color: ['#5470C6', '#FFCE34', '#FD665F']
    }
  },
  series: [
    {
      name: 'Actual',
      type: 'bar',
      zlevel: 1,
      itemStyle: {
        color: '#156082' // 线的颜色
      },
      encode: {
        // Map the "amount" column to X axis.
        x: 'eventName',
        // Map the "product" column to Y axis
        y: 'actual'
      },
      seriesLayoutBy: 'column'
    },
    // {
    //   name: 'Excepted',
    //   type: 'line',
    //   zlevel: 3,
    //   lineStyle: {
    //     color: '#E97132', // 线的颜色
    //     width: 2
    //     // type: 'dashed' // 设置为虚线
    //   },
    //   // symbol: 'pin', // 设置为圆形标记点
    //   // symbolSize: 18, // 设置标记点大小
    //   // itemStyle: {
    //   //   normal: {
    //   //     borderColor: 'rgba(220,20,60,0.8)', // 点边框颜色
    //   //     borderWidth: 2 // 点边框宽度
    //   //   }
    //   // },
    //   encode: {
    //   // Map the "amount" column to X axis.
    //     x: 'eventName',
    //     // Map the "product" column to Y axis
    //     y: 'excepted'
    //   },
    //   seriesLayoutBy: 'column'
    // },
    {
      type: 'custom',
      renderItem: function(params, api) {
        const bgColor = '#E97132'
        var xValue = api.value(0)
        var lowPoint = api.coord([xValue, api.value(1)]) // 得到下面线的中心坐标
        var halfWidth = api.size([1, 0])[0] * 0.2 // 根据x轴索引为1的数值得到所在的映射宽度*0.1
        return {
          type: 'rect',
          shape: {
            x: lowPoint[0] - (halfWidth + 8),
            y: lowPoint[1] - (halfWidth / 2),
            width: halfWidth * 2 + 16,
            height: halfWidth - 5
          },
          style: {
            fill: bgColor
            // stroke: '#fff',
            // lineWidth: 1
          },
          zlevel: 1000 // 设置 zlevel 控制 zindex
        }
      },
      zlevel: 3,
      data: excepteds,
      name: 'Excepted',
      itemStyle: {
        normal: {
          borderWidth: 1.5
        }
      }
    }
  ]
}
